<template>
  <div class="image-loader-container">
    <img v-if="!imgLoadShow" :src="placeholderSrc" class="placeholder-img" />
    <img
      @load="handLoad"
      :src="src"
      class="origin"
      :style="{ opacity: originOpacity, transition: duration + 'ms' }"
    />
  </div>
</template>

<script>
export default {
  props: {
    placeholderSrc: {
      type: String,
      required: true,
    },
    src: {
      type: String,
      required: true,
    },
    duration: {
      type: Number,
      default: 300,
    },
  },
  data() {
    return {
      originLoaded: false,
      imgLoadShow: false,
    }
  },
  computed: {
    originOpacity() {
      return this.originLoaded ? 1 : 0
    },
  },
  methods: {
    handLoad() {
      this.originLoaded = true
      setTimeout(() => {
        this.imgLoadShow = true
        this.$emit('loaded')
      }, this.duration)
    },
  },
}
</script>

<style scoped>
.image-loader-container {
  width: 100%;
  height: 100%;
  position: relative;
}
.placeholder-img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  filter: blur(5px);
}
.origin {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}
</style>
